<!--
 * @Date: 2023-01-11 20:40:56
 * @LastEditTime: 2023-09-12 16:42:13
 * 介绍:列表组件
-->
<script lang="ts" setup>
import RpullRefresh from "@@/components/rework/RpullRefresh/RpullRefresh.vue";
import { Props as ClistStateProps } from "@@/components/common/ClistState/ClistState.vue";

export interface Props {
  state?: ClistStateProps;
  minHeight?: string;
  sticky?: boolean;
  /**是否使用下拉刷新 */
  pullRefresh?: boolean;
  offsetTop?: string;
}
export interface Emits {
  (e: "load"): any;
  (e: "refresh"): any;
}
export interface Slots {
  header?: ({}) => any;
  default?: ({}) => any;
}

const props = withDefaults(defineProps<Props>(), {
  minHeight: "50vh",
  pullRefresh: true,
  offsetTop: "110rem",
});

const emit = defineEmits<Emits>();
function load() {
  emit("load");
}

/**下拉刷新 */
const PullRefreshRef = ref<InstanceType<typeof RpullRefresh>>();
/**监听下拉刷新 */
async function onRefresh() {
  emit("refresh");
}
/**下拉刷新成功 */
function pullDownSuccess() {
  PullRefreshRef.value?.success();
}
/**下拉刷新开始 */
function pullDownStart() {
  PullRefreshRef.value?.start();
}
/**下拉刷新失败 */
function pullDownFail() {
  PullRefreshRef.value?.fail();
}
defineExpose({ pullDownSuccess, pullDownStart, pullDownFail });
const slots = defineSlots<Slots>();
</script>
<template>
  <div class="Rlist">
    <van-sticky v-if="sticky" :offset-top="offsetTop" position="top">
      <slot name="header"></slot>
    </van-sticky>
    <slot v-else name="header"></slot>

    <RpullRefresh
      :disabled="!pullRefresh"
      ref="PullRefreshRef"
      @refresh="onRefresh"
    >
      <van-list
        :loading="props.state?.type === 'loading'"
        :finished="props.state?.type === 'end' || props.state?.type === 'null'"
        :error="props.state?.type === 'error'"
        @load="load"
        class="Rlist_list"
        :style="{ minHeight }"
      >
        <slot></slot>
        <ClistState :="{ ...props.state }" />
        <template #error> </template>
        <template #loading> </template>
        <template #finished> </template>
      </van-list>
    </RpullRefresh>
  </div>
</template>

<style lang="scss" scoped>
.Rlist {
  .Rlist_default {
    margin-bottom: var(--gap-md);
  }
}
</style>
